<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="css/public.css">
    <style>
        .header .set{
            position: absolute;
            right: -25px;
            top: 0;
            font-size: 0.6rem;
            color: #777777;
        }
        .header .center{
            overflow: hidden;
            width: 200px;
            border-radius: 5px;
            border:1px solid #ff6d82;
            height: 20px;
            margin-top: 10px;
            position: absolute;
            left:50%;
            margin-left: -100px;

        }
        .header .center p{
            float: left;
            text-align: center;
            width: 50%;
            margin: 0;
            font-size: 0.6rem;
            line-height: 20px;
            color:#ff6d82;
        }
        .header{
            overflow: hidden;
            position: relative;
        }
        .center .active{
            background: #ff6d82;
            color: #ffffff !important;
        }
        .header_info .header_info-top{
            height: 80px;
            background: #fe6d82;
            overflow: hidden;
        }
        .header_info .header_info_touxiang{
            width: 70px;
            height: 70px;
            padding: 10px;
            padding-right: 0px;
            float: left;
        }
        .header_info .header_info_touxiang img{
            border-radius: 360px;
            width: 60px;
            height: 60px;
            border: 2px solid #ffffff;
            box-sizing: border-box;
        }
        .header_info .header_info_name{
            padding-top:20px;
        }
        .header_info .header_info_name p{
            font-size: 0.68rem;
            color: #ffffff;
            line-height: 20px;
        }
        .header_info .header_info_name p span{
            color: #ffc001;
        }
        .header_info .header_info_name p time{
            font-size: 0.6rem;
        }
        .header_info .header_info_name p:first-child{
            font-size: 0.73rem;
        }
        .header_info .ionc{
            width: 30px;
            height: 30px;
            float: right;
            position: relative;
            top:-30px;
            background: url("img/ionc.png") no-repeat 0px -486px;
            background-size: 512px;
        }
        .feiyong .feiyong_info{
            float: left;
            width: 50%;
            text-align: center;
            box-sizing: border-box;
            font-size: 0.7rem;
            padding: 10px 0;
        }
        .feiyong{background: #ffffff;overflow: hidden; position: relative}
        .feiyong:before{
            position:absolute;
            content: "";
            height:1px;
            background:#cccccc;
            width:100%;
            bottom:0px;
            -webkit-transform:scaleY(.5);
            -ms-transform:scaleY(.5);
            -o-transform:scaleY(.5);
            transform:scaleY(.5);
        }
        .feiyong .feiyong_info p{
            line-height: 30px;
        }
        .feiyong .feiyong_info:first-child{
            border-right: 1px solid #ccc;
        }
        body{background: #f5f5f5}
        .feiyong_info p:last-child{
            color: #dc0000;
        }
        .list{
            width: 100%;
            box-sizing: border-box;
            background: white;
            margin-top: 1px;
        }
        .list li p span:first-child{
            font-size: 15px;
        }
        .list li{
            color: black;
            border-bottom: 1px solid #cccccc;
            padding: 12px ;
            overflow: hidden;
        }
        .list li a{
            color: black;
        }
        .list li .list_left{
            float: left;
        }
        .list li .list_right{
            font-size: 0.7rem;
            color: #777777;
            margin-top: 15px;
            float: right;
        }
        .list li .span1{
            font-size: 0.7rem;
            color: orange;
        }
        .list li p:last-child{
            margin-top: 5px;
            color: #777;
            font-size: 13px;
        }
        .history{
            padding: 10px 0;
            padding-left: 10px;
            font-size: 0.75rem;
        }
    </style>
</head>
<body>
<div class="header">
    <i></i>
    <div class="center"><p>商城收益</p><p  class="active">商圈收益</p></div>
    <p class="set">提现</p>
</div>
<div class="main1">
    <div class="header_info">
        <div class="header_info-top">
            <div class="header_info_touxiang">
                <img src="http://imgsize.ph.126.net/?enlarge=true&amp;imgurl=http://img1.ph.126.net/iI_w28S-bcAdsil0IWnuvg==/6632043032514661339.png_223x124x1x95.png" alt="">
            </div>
            <div class="header_info_name">
                <p>方海军三新学堂先生<span>[见习分销]</span></p>
                <p>加入时间 : <time>2016-11-12 14:01</time></p>
            </div>
            <div class="ionc">
                <i></i>
            </div>
        </div>
        <div class="feiyong">
            <div class="feiyong_info">
                <p>累计推广费用</p>
                <p>0.00元</p>
            </div>
            <div class="feiyong_info">
                <p>累计推广费用</p>
                <p>0.00元</p>
            </div>
        </div>
    </div>
    <div class="history">
        本月收益
    </div>
    <div class="list">
        <ul>
            <li><a href="##">
                <div class="list_left">
                    <p><span>方海军</span> <span class="span1"> [一级分销]</span></p>
                    <p>总消费额：￥<span>1111</span></p>
                </div>
                <div class="list_right">
                    佣金： ￥<span>123111114</span>
                </div>
            </a>
            </li>

            <li><a href="##">
                <div class="list_left">
                    <p><span>方海军</span> <span class="span1"> [一级分销]</span></p>
                    <p>总消费额：￥<span>1111</span></p>
                </div>
                <div class="list_right">
                    佣金： ￥<span>123111114</span>
                </div>
            </a>
            </li>
            <li><a href="##">
                <div class="list_left">
                    <p><span>方海军</span> <span class="span1"> [一级分销]</span></p>
                    <p>总消费额：￥<span>1111</span></p>
                </div>
                <div class="list_right">
                    佣金： ￥<span>123111114</span>
                </div>
            </a>
            </li>
            <li><a href="##">
                <div class="list_left">
                    <p><span>方海军</span> <span class="span1"> [一级分销]</span></p>
                    <p>总消费额：￥<span>1111</span></p>
                </div>
                <div class="list_right">
                    佣金： ￥<span>123111114</span>
                </div>
            </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    window.onload = function(){
         console.log('sadhsakkjlkl')
    }
</script>